<template>
  <!-- 留案记录查询 -->
  <section class="page case-record-query">
    <data-form :model="searchModel" @onSearch="refreshData" :page="pageService" @handleResetForm="follFeedback" :rules="rules">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model.trim="searchModel.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model.trim="searchModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model.trim="searchModel.idCard" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model.trim="searchModel.mobileNo"  maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="applyHandCode">
          <el-input v-model.trim="searchModel.applyHandCode" maxlength="20"></el-input>
        </el-form-item>
        <!-- <el-form-item label="机构号" prop="departmentCode">
          <el-input v-model.trim="searchModel.departmentCode"></el-input>
        </el-form-item> -->
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.applyTime" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="留案原因" prop="applyDescription">
          <el-select v-model="searchModel.applyDescription">
            <el-option v-for="item in leaveCode" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="recordHistory" @onPageChange="refreshData" :page="pageService">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="personalNo" label="客户号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="idCard" label="证件号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column prop="departmentCode" label="机构号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="applyHandCode" label="申请人" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="applyDescription" label="留案原因" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
          <template slot-scope='scope'>
            <el-button type="text" @click="showRecored(scope.row.id)" v-auth="23406">查看审批记录</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!-- 查看审批记录 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <data-box :data="dataSet" @onPageChange="refreshData">
        <template slot="columns">
          <!--数据列区域-->
          <el-table-column prop="approvalRealName" label="审批人姓名" :min-width="$helper.getColumnWidth(6)" />
          <el-table-column prop="applyStatus" label="审批状态" :min-width="$helper.getColumnWidth(4)">
            <template slot-scope="scope">
              <div> {{$filter.dictConvert(scope.row.applyStatus,'ApplyStatus')}}</div>
            </template>
          </el-table-column>
          <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(5)" label="审批时间" prop="approvalTime" show-overflow-tooltip></el-table-column>
          <el-table-column prop="applyStatus" label="审批结果" :min-width="$helper.getColumnWidth(4)">
            <template slot-scope="scope">
              <div> {{$filter.dictConvert(scope.row.applyStatus,'ApplyStatus')}}</div>
            </template>
          </el-table-column>
        </template>
      </data-box>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Auth, Layout, Dependencies } from "~/core/decorator"
import { PageService } from "~/utils/page.service"
import DataForm from "~/components/common/data-form.vue"
import DataBox from "~/components/common/data-box.vue"
import { SortService } from "~/utils/sort.service"
import NumberRange from "~/components/common/number-range.vue"
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service"
import { namespace, Getter, Mutation,State } from "vuex-class"
import { MENU_CHANNEL } from "../../config/enum.config"
import { CaseApplyRecordService } from '~/services/domain-service/case-apply-record.service'
import { UserService } from "~/services/management-service/user.service";
import { CODE_PARAMETERS } from "~/config/enum.config";

@Layout("workspace")
@Component({
  components: {
    NumberRange
  }
})
export default class MessageSendRecordQuery extends Vue {
  @Dependencies(CaseApplyRecordService) private CaseApplyRecordService: CaseApplyRecordService
  @Dependencies(PageService) private pageService: PageService
  @Dependencies(SortService) private sortService: SortService
  @Dependencies(UserService) private userService: UserService;
  @Dependencies(SynthesizeQueryService) private synthesizeQueryService: SynthesizeQueryService
  @State private principalList: any
  private recordHistory: any = []
  private rules: any = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }],
    personalNo: [
      {
        pattern: this.$validator.regex.isNumber,
        message: "客户号请输入数字",
        trigger: "blur"
      }
    ]
  };
  
  private searchModel: any = {
    caseNumber: "",
    personalName: "",
    idCard: "",
    mobileNo: "",
    departmentCode: "",
    applyHandCode: "",
    applyTime: { min: "", max: "" },
    applyDescription: "",
  }
  private leaveCode: any = []
  private dialogVisible: boolean = false
  private dataSet: any[] = []

  private pickerOptions = {
    disabledDate (time) {
      return time.getTime() > Date.now();
    },
  }

  private mounted() {
    this.refreshData()
    this.getLeaveCodeData()
  }

  private follFeedback() {
    this.searchModel.applyTime = { min: "", max: "" }
  }

  private paramsHandler() {
    const params = { ...this.searchModel }
    params.applyTimeMax = this.$filter.dateRanageFormat(
      this.searchModel.applyTime
    ).end;
    params.applyTimeMin = this.$filter.dateRanageFormat(
      this.searchModel.applyTime
    ).start;
    delete params.applyTime;
    return params;
  }
  
  // 留案原因码
  private getLeaveCodeData() {
    this.userService
      .findAlreadyEffectCodeByType({ code: CODE_PARAMETERS.LA_CODE })
      .subscribe(data => {
        this.leaveCode = data
      });
  }

  private refreshData() {
    this.CaseApplyRecordService
      .getAllCaseStayQueryLog(this.paramsHandler(), this.pageService)
      .subscribe(data => (this.recordHistory = data))
  }
  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Query_case_query,
      hiddenCaseList: true,
      hiddenAction: true
    })
  }

  private showRecored(id) { // 获取审批历史
    this.CaseApplyRecordService.recordHistoryByTaskId({ caseTaskId: id, applyCategory: 'LEAVE_CASE' }).subscribe(data => {
      this.dataSet = data
      this.dialogVisible = true
    })
  }

  private handleClose() {
    this.dataSet = []
    this.dialogVisible = false
  }
}
</script>
<style lang="less">
  .case-record-query{
    .el-dialog__footer{
      text-align: center !important;
    }
  }
</style>
